<script lang="ts" setup>
import { onMounted, ref, onBeforeMount } from "vue";

import { Search } from "@element-plus/icons-vue";
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
  },
];
const input2 = ref("");
const currentPage2 = ref(5);
const pageSize2 = ref(100);
const size = ref(10);
const background = ref(false);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
const active = ref("0");
const changeAct = (val: any) => {
  active.value = val;
};
const testAct = ref("0");
const changeTest = (val: any) => {
  testAct.value = val;
};
</script>
<template>
  <div class="contentbox">
    <div style="display: flex">
      <div style="flex: 1">
        <div class="searchHeader">
          <el-input
            v-model="input2"
            size="default"
            class="input"
            placeholder="请输入搜索"
          >
            <template #suffix>
              <el-icon style="color: #0c9397">
                <Search />
              </el-icon>
            </template>
          </el-input>
        </div>

        <el-table
          :data="tableData"
          align="left"
          header-row-class-name="headerName"
          :border="false"
          style="width: calc(100%)"
        >
          
          <el-table-column prop="date" label="适应症名称" />
          <el-table-column prop="date" label="在研项目数" >
            <template #default="scope">
              <el-button size="mini" style="color: #0c9397" link>
                111
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage2"
            v-model:page-size="pageSize2"
            :page-sizes="[10, 200, 300, 400]"
            :size="size"
            :background="true"
            layout="prev, pager, next,sizes,"
            :total="1000"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.container {
  background-color: #fff;
  height: calc(100% - 40px);
  margin: 20px auto;
  padding: 20px;
}

button {
  width: 120px;
  height: 36px;
  background-color: #f5f5f5;
  font-size: 16px;
  margin-right: 11px;
  cursor: pointer;
  color: #333333;
}

.on {
  background-color: #0c9397;
  color: #fff;
}

.searchHeader {
  display: flex;
  margin-bottom: 13px;
  margin-top: 20px;
  justify-content: space-between;
  .input {
    width: 400px;
    height: 36px;
  }

  .add {
    border: 1px solid #0c9397;
    color: #0c9397;
    background-color: rgba(12, 147, 151, 0.1);
    margin: 0;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.openTest {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  button {
    margin: 0;
    border: 1px solid #0c9397;
    color: #0c9397;
    background-color: rgba(12, 147, 151, 0.1);
  }

  span {
    margin-right: 12px;
    color: #666;
  }

  .teston {
    background-color: #0c9397;
    color: #fff;
  }
}

.expandData {
  background: #f5f5f5;
  margin: 10px 20px;

  p {
    font-size: 16px;
    color: #666666;
    margin-top: 10px;
  }
}
.contentbox {
  background-color: #fff;
  padding: 1px 20px 20px;
  margin-top: 20px;
}
.righttj {
  width: 330px;
  margin-top: 70px;
  margin-left: 25px;
  border: 1px solid #ebebeb;

  p {
    background-color: #f5f5f5;
    color: #666666;
    height: 42px;
    line-height: 42px;
    padding-left: 16px;
  }

  ul {
    padding: 15px 16px;
  }

  li {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #ebebeb;
    font-size: 16px;
    color: #666666;
    margin: 0 5px 8px 0;
  }
}
</style>